<template>
    <div class="main-body">
        <el-row style="margin: 10px 0px 5px 0px;">
            <el-col :span="4" >
                <el-input placeholder="请输入菜单名" v-model="query.menuName"   @change="changeName"  class="input-with-select">
                    <el-button slot="append" @click="loadData" icon="el-icon-search"></el-button>
                </el-input>
            </el-col>
            <el-col :span="20" style="padding: 0px 0px 0px 10px" >
                <el-button @click="openAdd()" icon="el-icon-plus" plain>添加菜单</el-button>
                <el-button @click="openEdit()" icon="el-icon-edit" type="primary" plain>修改菜单</el-button>
                <el-button @click="remove()" icon="el-icon-delete" type="danger" plain>删除菜单</el-button>
                <el-button @click="menuSort()" icon="el-icon-s-operation" v-if="query.menuName==null||query.menuName===''" plain>排序</el-button>
                <el-button @click="setHome()" icon="el-icon-edit" type="primary" plain>设置首页</el-button>
            </el-col>
        </el-row>

        <el-row >
            <el-col :span="22"  >
                <el-table
                        border stripe highlight-current-row header-cell-class-name="t_h_cell" class="data-table"
                        :data="rows" row-key="id" :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
                        :v-loading="loading"     default-expand-all
                        :height=dataTableHeight ref="tableRef"
                        @current-change="dataChange" >

                    <el-table-column  type="index"
                                      :index="indexData" width="40">
                    </el-table-column>

                    <el-table-column  :width="220" :show-overflow-tooltip="true"
                                      prop="menuName" label="菜单名称">
                        <template  slot-scope="scope">
                            <i v-if="scope.row.icon!=null&&scope.row.icon!=='' " :class="scope.row.icon"></i>
                            <span >{{scope.row.menuName}}</span>
                            <el-tag v-if="scope.row.menuType===2"  >HOME</el-tag>
                        </template>
                    </el-table-column>

                    <el-table-column :width="70"   :show-overflow-tooltip="true"
                                       prop="isEnable" label="启用状态">
                        <template  slot-scope="scope">
                            <el-tag v-if="scope.row.isEnable" type="success" >启用</el-tag>
                            <el-tag v-if="!scope.row.isEnable" type="danger">停用</el-tag>
                        </template>
                    </el-table-column>

                    <el-table-column  :width="100" :show-overflow-tooltip="true" align="right"
                                      prop="appCode" label="应用编码">
                    </el-table-column>

                    <el-table-column  :width="250" :show-overflow-tooltip="true"
                                      prop="menuUrl" label="菜单地址">
                    </el-table-column>

                    <el-table-column  :width="80" :show-overflow-tooltip="true" align="left"
                                      prop="frame" label="展现方式">
                        <template  slot-scope="scope">
                            <el-tag v-if="scope.row.frame===1" >基座</el-tag>
                            <el-tag v-if="scope.row.frame===2" >微前端</el-tag>
                            <el-tag v-if="scope.row.frame===3" >iframe</el-tag>
                        </template>
                    </el-table-column>

                    <el-table-column   :show-overflow-tooltip="true"
                                      prop="id" label="操作权限">
                        <template  slot-scope="scope">
                            <span v-for="(optItem) in scope.row.operations">{{optItem.optName}} | </span>
                        </template>
                    </el-table-column>

                </el-table>
            </el-col>
            <el-col :span="2"  v-if="isSort" style="padding: 5px 0px 0px 10px" >
                <div>
                    <el-button  @click="sortRow(1)" icon="el-icon-top" > 上移</el-button>
                </div>
                <div style="padding: 10px 0px 0px 0px">
                    <el-button  @click="sortRow(2)" icon="el-icon-bottom" >下移</el-button>
                </div>

                <div style="padding: 20px 0px 0px 0px">
                    <el-button  @click="sortRow(3)" icon="el-icon-arrow-up" >置顶</el-button>
                </div>
                <div style="padding: 10px 0px 0px 0px">
                    <el-button  @click="sortRow(4)" icon="el-icon-arrow-down" >置底</el-button>
                </div>

                <div style="padding: 20px 0px 0px 0px">
                    <el-button  @click="submitSort"  type="primary" >提交排序</el-button>
                </div>
            </el-col>

            <el-col :span="2" v-if="!isSort" style="padding: 5px 0px 0px 10px" >
                <div>
                    <el-button  disabled icon="el-icon-top" > 上移</el-button>
                </div>
                <div style="padding: 10px 0px 0px 0px">
                    <el-button  disabled icon="el-icon-bottom" >下移</el-button>
                </div>

                <div style="padding: 20px 0px 0px 0px">
                    <el-button  disabled icon="el-icon-arrow-up" >置顶</el-button>
                </div>
                <div style="padding: 10px 0px 0px 0px">
                    <el-button  disabled icon="el-icon-arrow-down" >置底</el-button>
                </div>
            </el-col>
        </el-row>

        <menu_edit :visible.sync="editVisible"
                       @loadData="loadData"  ref="editRef"  ></menu_edit>

    </div>
</template>

<script>
    import JsonBig from 'json-bigint'
    import menu_edit from './menu_edit.vue'
    export default {
        name:'menu_main',
        components: {
            menu_edit,
        },
        data() {
            return {
                query:{},
                offsetHeight:130,
                dataTableHeight:400,
                currentRow:null,
                editVisible:false,
                loading:false,
                isSort:false,
                rows:[
                ],
            }
        },
        created() {

        },
        mounted() {
            this.$nextTick(function () {
                this.dataTableHeight = window.innerHeight - this.$refs.tableRef.$el.offsetTop - this.offsetHeight;
            });
            this.loadData();
        },
        methods: {
            dataChange(val) {
                this.currentRow = val;
            },

            indexData(index){
                return index+1;
            },
            changeName(){
              if (this.query.menuName===''){
                  this.loadData();
              }
            },

            async loadData(){
                let _this=this;
                let url='/menu/dataList';
                _this.loading=true;
                await _this.$http.post(url,_this.query).then(function(res){
                    if(res.data.success){
                        console.log(res.data)
                        _this.rows=res.data.data;
                    }else{
                        _this.$message.error('获取数据错误！错误编码:'+res.data.code+'错误原因:'+res.data.msg);
                    }
                },function(){
                    _this.$message.error('获取数据错误！');
                });
                _this.loading=false;
            },
            openAdd(){
                /*if (null===this.currentRow){
                    this.$message.error("请选择节点");
                    return;
                }*/

                if (null!=this.currentRow){
                    if (this.currentRow.level===2){
                        this.$message.error("三级菜单不可添加子菜单");
                        return ;

                    }
                }
                this.editVisible=true;
                this.$refs.editRef.initData(this.currentRow);
            },
            openEdit(){
                let _this=this;
                if (_this.currentRow===null){
                    _this.$message.error("请选择数据");
                }else{
                    _this.editVisible=true;
                    _this.$refs.editRef.loadData(this.currentRow);
                }
            },
            remove(){
                let _this=this;
                if (_this.currentRow===null){
                    _this.$message.error("请选择数据");
                }else{
                    let url="/menu/delete";
                    let params={id:_this.currentRow.id};
                    _this.$confirm("确定删除数据", '提示', {confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning'
                    }).then(() => {
                        //删除数据
                         _this.$http.post(url,params).then(function(res){
                            if(res.data.success){
                                _this.$message.success("操作成功");
                                _this.loadData();
                            }else{
                                _this.$message.error('操作错误！错误编码:'+res.data.code+'错误原因:'+res.data.msg);
                            }
                        },function(){
                            _this.$message.error('操作错误！');
                        });
                    });
                }
            },

            setHome(){
                let _this=this;
                if (_this.currentRow===null){
                    _this.$message.error("请选择数据");
                }else{
                    let url="/menu/setHome";
                    let params={id:_this.currentRow.id};
                    _this.$confirm("确定设置首页", '提示', {confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning'
                    }).then(() => {
                        //设置首页
                        _this.$http.post(url,params).then(function(res){
                            if(res.data.success){
                                _this.$message.success("操作成功");
                                _this.loadData();
                            }else{
                                _this.$message.error('操作错误！错误编码:'+res.data.code+'错误原因:'+res.data.msg);
                            }
                        },function(){
                            _this.$message.error('操作错误！');
                        });
                    });
                }
            },
            menuSort(){
                if (this.isSort){
                    this.isSort=false;
                    this.submitSort();
                }else{
                    this.isSort=true;
                }
            },
            async submitSort(){
                let _this=this;
                let url="/menu/updateSort";
                await _this.$http.post(url,_this.rows).then(function(res){
                    if(res.data.success){
                        _this.$message.success("操作成功");
                        _this.loadData();
                    }else{
                        _this.$message.error('操作错误！错误编码:'+res.data.code+'错误原因:'+res.data.msg);
                    }
                },function(){
                    _this.$message.error('操作错误！');
                });
                this.isSort=false;
            },
            sortRow(sortType){
                if(this.currentRow===null){
                    this.$message({showClose: true,message: '请选择要操作的数据',type: 'warning'});
                }else {
                    let priority=this.currentRow.priority;
                    let rows=this.findNodeList(this.currentRow.id,this.rows);
                    if(sortType===1){//上移
                        if (priority>0) {
                            let tempIndex = rows[priority - 1].priority;
                            rows[priority - 1].priority = priority;
                            rows[priority].priority = tempIndex;
                            rows.sort(this.compareRow);
                        }
                    }
                    if(sortType===2){//下移
                        if (priority<rows.length-1) {
                            let tempIndex = rows[priority + 1].priority;
                            rows[priority + 1].priority = priority;
                            rows[priority].priority = tempIndex;
                            rows.sort(this.compareRow);
                        }
                    }
                    if(sortType===3){//置顶
                        if (priority>0) {
                            for (let i=0;i<priority;i++){
                                rows[i].priority = i+1;
                            }
                            rows[priority].priority = 0;
                            rows.sort(this.compareRow);
                        }
                    }
                    if(sortType===4){//置底
                        if (priority<rows.length-1) {

                            for (let i=rows.length-1;i>priority;i--){
                                rows[i].priority = i-1;
                            }
                            rows[priority].priority = rows.length-1;
                            rows.sort(this.compareRow);
                        }
                    }
                    //this.$emit('update:tableHead',this.tableHead);
                }
            },

            findNodeList(id,rows){
                let result=null;
                for (let row of rows) {
                    if (row.id === id) {
                        result=rows;
                    }else if (row.children && row.children.length>0){
                        let cp=this.findNodeList(id,row.children);
                        if (cp){
                            result=cp;
                        }
                    }
                }
                return result;
            },
            compareRow(a, b){
                return a.priority - b.priority
            },
        },

        filters: {

        },
        watch:{
            '$store.state.clientHeight':function(clientHeight){
                let _this=this;
                setTimeout(function (){
                    _this.dataTableHeight = clientHeight - _this.$refs.tableRef.$el.offsetTop - _this.offsetHeight;
                },200)
            }
        }
    }

</script>
